<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 & css coding standard</title>    
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/shCore.css" rel="stylesheet">
    <link href="css/shCoreEclipse.css" rel="stylesheet">	
</head>
<body>
	<nav id="tags"><div class="pin active">&nbsp;</div></nav> 
	<div id="wrapper"> 
		<h1>HTML5 & CSS Coding Standard</h1>
		<section>
		    <h2>HTML5 page standard style</h2>
		    <ul>
                <li class="text">
                    每个 HTML 页面的第一行添加标准模式（standard mode）的声明
                </li>
                <li class="text">
                    为 html 根元素指定 lang 属性
                </li>
                <li class="text">
                    统一使用UTF-8编码
                </li>
		        <li>
		            <div class="box">
                        <pre class="brush:css">
                            &lt;!DOCTYPE html&gt;
                            &lt;html lang="en"&gt;
                                &lt;head&gt;
                                    &lt;meta charset="utf-8"&gt;
                                    &lt;title&gt;your title&lt;/title&gt;
                                &lt;/head&gt;
                                &lt;body&gt;
                                
                                &lt;/body&gt;
                            &lt;/html&gt;
                        </pre>
                    </div>
		        </li>
		    </ul>
		</section>
		<section>
			<h2>HTML5 toplevel</h2>
			<ul>
                <li class="text">
                    使用 4 个空格 替换 1 个 Tab
                </li>
                 <li>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;body&gt;
                                &lt;h1 class="hello-world"&gt;Hello, HTML5!&lt;/h1&gt;
                            &lt;/body&gt;
                        </pre>
                    </div>
                </li>
                <li class="text">
                    标签和属性名全部使用 小写
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;img src="images/company-logo.png" alt="Company"&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;IMG SRC="images/company-logo.png" ALT="Company"&gt;
                        </pre>
                    </div>		
                </li>
                <li class="text">
                    属性值使用 双引号("), 而非单引号('); 更不可省略 引号
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;h1 class="hello-world" data-year="2015"&gt;Hello, HTML5!&lt;/h1&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;h1 class='hello-world' data-year=2015&gt;Hello, HTML5!&lt;/h1&gt;
                        </pre>
                    </div>		
                </li>
                <li class="text">
                    对于自关闭标签(如: meta, link, img, br, hr ...), 结尾不加斜线
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;img src="logo.png" alt="ss' company"&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;img src="logo.png" alt="ss' company" /&gt;
                        </pre>
                    </div>
                </li>
                <li class="text">
                    绝对不要省略结束标签: "&lt;/li&gt;, &lt;/body&gt;" 
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;ul&gt;
                                &lt;li&gt;item-01&lt;/li&gt;
                                &lt;li&gt;item-02&lt;/li&gt;
                                &lt;li&gt;item-03&lt;/li&gt;
                                &lt;li&gt;item-04&lt;/li&gt;
                                &lt;li&gt;item-05&lt;/li&gt;
                            &lt;/ul&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;ul&gt;
                                &lt;li&gt;item-01
                                &lt;li&gt;item-02
                                &lt;li&gt;item-03
                                &lt;li&gt;item-04
                                &lt;li&gt;item-05
                            &lt;/ul&gt;
                        </pre>
                    </div>
                </li>
                
            </ul>
        </section>
                
        <section>
			<h2>IE compatibility</h2>
			<ul>
                <li class="text">
                    如需要兼容IE浏览器, 通知 IE 采用其所支持的最新的模式来渲染页面
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;head&gt;
                                &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
                            &lt;/head&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
         
        
        <section>
			<h2>CSS & JS</h2>
			<ul>
                <li class="text">
                    对于CSS和Javascript文件的引入, 不需指定type属性
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;head&gt;
                                &lt;link rel="stylesheet" href="app.css"&gt;
                            
                                &lt;style&gt;
                                    /* ... */
                                &lt;style&gt;
                            
                                &lt;script src="app.js"&gt;&lt;/script&gt;
                                
                                &lt;script&gt;
                                    // ...                                
                                &lt;/script&gt;
                            &lt;/head&gt;
                        </pre>
                    </div>					
                    <div class="box">
                        <pre class="brush:css">
                            &lt;head&gt;
                                &lt;link rel="stylesheet" href="app.css" type="text/css"&gt;

                                &lt;style type="text/css"&gt;
                                    /* ... */
                                &lt;style&gt;

                                &lt;script src="app.js" type="text/javascript"&gt;&lt;/script&gt;
                                
                                &lt;script type="text/javascript"&gt;
                                    // ...                                
                                &lt;/script&gt;
                            &lt;/head&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>boolean value attribute</h2>
			<ul>
                <li class="text">
                    布尔型属性在声明时不赋值.(xhtml 必需, 而且必须, 但html(5)不需要)
                </li>
                <li class="text">
                    元素的布尔型属性如果有值, 就是 true, 如果没有值, 就是 false
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;input type="text" disabled&gt;
                            
                            &lt;input type="checkbox" value="1" checked&gt;
                            
                            &lt;select&gt;
                                 &lt;option value="1" selected&gt;value&lt;/option&gt;
                            &lt;/select&gt;
                        </pre>
                    </div>					
                    <div class="box">
                         <pre class="brush:css">
                            &lt;input type="text" disabled="disabled"&gt;
                            
                            &lt;input type="checkbox" value="1" checked="checked"&gt;
                            
                            &lt;select&gt;
                                 &lt;option value="1" selected="selected"&gt;value&lt;/option&gt;
                            &lt;/select&gt;
                        </pre>   
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>use less tags</h2>
			<ul>
                <li class="text">
                    尽量避免无意义的, 多余的标签, 使用最简单的标签实现功能
                </li>
                <li class="text">
                    从这一点说, 现在的很多框架(bootstrap等), 是不符合这个观点的.<br>
                    为达到通用效果, 它就是通过层层嵌套标签, 来实现最大化的伸缩性(控制)
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;img class="avatar" src="..."&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;span class="avatar"&gt;                            
                                &lt;img src="..."&gt;                            
                            &lt;/span&gt;
                        </pre>
                    </div>
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;ul class="list"&gt;
                                &lt;li&gt;item&lt;/li&gt; 
                            &lt;/ul&gt;  
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;div class="list"&gt;                            
                                &lt;ul&gt;
                                     &lt;li&gt;item&lt;/li&gt; 
                                &lt;/ul&gt;                            
                            &lt;/div&gt;
                            
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>attribute order</h2>
			<ul>
                <li class="text">
                    class 用于标识高度可复用组件, 因此应该排在首位<br>
                    id 用于标识具体组件, 应当谨慎使用(页面书签)<br>
                    (需要知道: 一个id在一个页面中只能出现一次)
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            class
                            id, name
                            data-*
                            src, for, type, href
                            title, alt
                            aria-*, role
                        </pre>
                    </div>
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;a class="reuse" id="unique" data-modal="toggle" href="javascript:;"&gt;
                                Example link
                            &lt;/a&gt;

                            &lt;input class="form-control" type="text"&gt;

                            &lt;img src="logo.png" alt="ss' company"&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>break the line</h2>
			<ul>
                <li class="text">
                    标签元素太长(尤其是在使用某些框架的情况下)造成一行显示不完整时, 请从第一个属性处就开始折行
                </li>
                <li class="text">
                    折行进行 1Tab(4spaces) 缩进; 为和内容分开, 折行和内容之间请使用换行.
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;div
                                class="worklist"
                                ng-controller="WorklistController"&gt;

                                &lt;div 
                                    class="patients-list"
                                    ng-repeat="p in patients"
                                    ng-click="p.hello()"
                                    ng-if="p.age &gt; 12"		
                                    name="p.name"
                                    age="p.age"&gt;

                                    &lt;span ng-bind="name"&gt;&lt;span&gt;
                                    &lt;span ng-bind="age"&gt;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;div class="worklist" ng-controller="WorklistController"&gt;
                                &lt;div class="patients-list" ng-repeat="p in patients" ng-click="p.hello()"
                                    ng-if="p.age &gt; 12" name="p.name" age="p.age"&gt;
                                    &lt;span ng-bind="name"&gt;&lt;span&gt;
                                    &lt;span ng-bind="age"&gt;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>use sementic tags</h2>
			<ul>
                <li class="text">
                    使用语义化的标签, 而不是自始至终都是div
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;!-- best --&gt;
                            &lt;!-- use css3 to align the items --&gt;
                            &lt;nav&gt;                                
                                &lt;span&gt;Home&lt;/span&gt;
                                &lt;span&gt;Blog&lt;/span&gt;
                                &lt;span&gt;About&lt;/span&gt;
                            &lt;/nav&gt;
                               
                            &lt;!-- good --&gt;
                            &lt;ul class="nav"&gt;                                
                                &lt;li&gt;Home&lt;/li&gt;
                                &lt;li&gt;Blog&lt;/li&gt;
                                &lt;li&gt;About&lt;/li&gt;
                            &lt;/ul&gt;
                               
                            &lt;!-- bad --&gt;
                            &lt;div class="nav"&gt;
                                &lt;ul&gt;                                
                                    &lt;li&gt;Home&lt;/li&gt;
                                    &lt;li&gt;Blog&lt;/li&gt;
                                    &lt;li&gt;About&lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>comment</h2>
			<ul>
                <li class="text">
                    不轻易注释, 不吝啬注释
                </li>
                <li class="text">
                    use &lt;!-- ... --&gt;
                </li>
                <li class="text">
                    请对一个内容过长的标签, 在其结束处加上注释
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;div class="a-long-content-tag"&gt; 
                            
                                &lt;!-- ... --&gt;
                                
                            &lt;/div&gt; &lt;!-- /a-long-content-tag --&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>nested tags</h2>
			<ul>
                <li class="text">
                    标签的嵌套, 保证正确的顺序
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;em&gt;
                                &lt;strong&gt;
                                    &lt;a href="/home" title="my home page"&gt;Home&lt;a&gt;
                                &lt;/strong&gt;
                            &lt;/em&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;em&gt;
                                &lt;strong&gt;
                                    &lt;a href="/home" title="my home page"&gt;Home&lt;a&gt;
                                &lt;/em&gt;
                            &lt;/strong&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>about list</h2>
			<ul>
                <li class="text">
                    li 标签必须(也只能)出现在 ul(unordered list) 或 ol(ordered list) 中
                </li>
                <li class="text">
                    dt 和 dd 必须(也只能)出现在 dl(defined list) 中
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;ul&gt;                                
                                &lt;li&gt;Home&lt;/li&gt;
                                &lt;li&gt;Blog&lt;/li&gt;
                                &lt;li&gt;About&lt;/li&gt;
                            &lt;/ul&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;p&gt;                                
                                &lt;li&gt;Home&lt;/li&gt;
                                &lt;li&gt;Blog&lt;/li&gt;
                                &lt;li&gt;About&lt;/li&gt;
                            &lt;/p&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>CSS syntax</h2>
			<ul>
                <li class="text">
                    为选择器分组时, 请将单独的选择器单独放在一行
                </li>
                <li class="text">
                    为了代码易读, 请在每个声明块的左花括号前添加一个空格
                </li>
                <li class="text">
                    声明块的右花括号应当 单独一行
                </li>
                <li class="text">
                    每条声明语句: 后请插入一个空格
                </li>
                <li class="text">
                    每条声明都应该独占一行
                </li>
                <li class="text">
                    所有声明语句都应当以分号结尾
                </li>
                <li class="text">
                    对于以逗号分隔的属性值, 每个逗号后面都应该插入一个空格
                </li>
                <li class="text">
                    省略小于 1 的小数前面的 0 (0.5em => .5em)
                </li>
                <li class="text">
                    十六进制值应该全部小写(#ABCDEF => #abcdef)
                </li>
                <li class="text">
                    尽量使用简写形式的十六进制值,(#ffffff => #fff)
                </li>
                <li class="text">
                    为选择器中的属性添加双引号(input[type=text] => input[type="text"])
                </li>
                <li class="text">
                    零值 请不要指定单位(margin: 0px; => margin: 0)
                </li>
                
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            .box,
                            .box[class="special"],
                            .sidebar {
                                margin: 0;
                                padding: 0 0 20px;
                                color: rgba(0, 0, 0, .5);
                                box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
                            }                            
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            .box,.box[class="special"],.sidebar{
                                margin:0px; padding:0px 0px 20px;
                                color:rgba(0,0,0,0.5);
                                box-shadow:0px 1px 2px #CCCCCC,inset 0 1px 0 #FFFFFF;
                            }                            
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>CSS declaration order</h2>
			<ul>
                <li class="text">
                    影响浏览器布局的规则放到前面, 其它只影响视觉效果的(字体, 颜色, 背景) 放在后面
                </li>
                <li class="text">
                    1. Positioning<br>
                    2. Box model<br>
                    3. Typographic<br>
                    4. Visual
                </li>
                
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            .declaration-order {
                                /* Positioning */
                                position: absolute;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                left: 0;
                                z-index: 100;

                                /* Box-model */
                                display: block;
                                clear: both;
                                float: right;
                                width: 100px;
                                height: 100px;
                                margin: 10px;
                                padding: 0;
                                border: 1px solid #e5e5e5;

                                /* Typography */
                                font: normal 13px "Helvetica Neue", sans-serif;
                                line-height: 1.5;
                                color: #333;
                                text-align: center;

                                /* Visual */
                                background-color: #f5f5f5;
                                
                                /* Misc */
                                opacity: 1;
                                
                                /* css3 */
                                border-radius: 3px;
                            }
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>never use @import</h2>
			<ul>
                <li class="text">
                    不管是在html中, 还是在css文件, 请不要使用 @import, 因为它的效率比普通的link要慢得多
                </li>
                <li class="text">
                    如果有多个css文件, 可以使用多个link元素, 更好的是使用外部工具压缩成一个
                </li>                
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;link rel="stylesheet" href="sub.css"&gt;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;style&gt;
                                @import url("sub.css");
                            &lt;/style&gt;
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>CSS comment</h2>
			<ul>
                <li class="text">
                    use /* ... */, not //
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            .box {
                                /* width: 400px; */
                                height: 1000px;
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            .box {
                                // width: 400px;
                                height: 1000px;
                            }
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>CSS name</h2>
			<ul>
                <li class="text">
                    请只使用小写字母, 中线(减号 -)(不是下划线 _, 也不是驼峰命名)和数字, 且以小写字母开头
                </li>
                <li class="text">
                    请避免过度任意的简写, .btn 我们能猜到 代表 button, 但 .s 可能就会让人迷糊了
                </li>
                <li class="text">
                    使用有意义的名称, 绝不要根据视觉效果命名(.red => .error)
                </li>
                <li class="text">
                    不要滥用命名, 很多时候 tag组合 更合适
                </li>
                <li class="text">
                    hello, <strong style="color: blue;">HTML5</strong> and <strong style="color: blue;">CSS3</strong>!
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            &lt;p class="content"&gt;
                                hello, &lt;strong&gt;HTML5&lt;/strong&gt;
                                and &lt;strong&gt;CSS3&lt;/strong&gt;!
                            &lt;/p&gt;
                            
                            .content strong {
                                color: blue;
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            &lt;p class="content"&gt;
                                hello, &lt;span class="emphasis"&gt;HTML5&lt;/span&gt;
                                and &lt;span class="emphasis"&gt;CSS3&lt;/span&gt;!
                            &lt;/p&gt;
                            
                            .emphasis {
                                color: blue;
                                font-weight: bold; 
                            }
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        <section>
			<h2>Misc.</h2>
			<ul>
                <li class="text">
                    使用特定厂商的带有前缀的属性时, 通过缩进的方式, 让每个属性的值在垂直方向对齐
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            .box {
                                -webkit-border-radius: 5px;
                                   -moz-border-radius: 5px;
                                    -ms-border-radius: 5px;
                                     -o-border-radius: 5px;
                                        border-radius: 5px;
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            .box {
                                -webkit-border-radius: 5px;
                                -moz-border-radius: 5px;
                                -ms-border-radius: 5px;
                                -o-border-radius: 5px;
                                border-radius: 5px;
                            }
                        </pre>
                    </div>
                </li>
                <li class="text">
                    对于只包含一条声明的样式，为了易读性和便于快速编辑，请将语句放在同一行
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            .box b { color: blue; }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            .box b {
                                color: blue;
                            }
                        </pre>
                    </div>
                </li>
                
                <li class="text">
                    在需要显示地设置所有值的情况下, 请尽可能的使用简写形式
                </li>
                <li class="text">
                    只须设置 1~2 属性的情况下, 请使用分写
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:css">
                            .element {
                                margin-bottom: 10px;
                                background-color: red;
                                background-image: url("image.jpg");
                                border-top-left-radius: 3px;
                                border-top-right-radius: 3px;
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:css">
                            .element {
                                margin: 0 0 10px;
                                background: red;
                                background: url("image.jpg");
                                border-radius: 3px 3px 0 0;
                            }
                        </pre>
                    </div>
                </li>
                <li class="text">
                    将媒体查询放在尽可能相关规则的附近, 不要将他们打包放在一个单一样式文件中或者放在文档底部
                </li>
                <li>	
                    <div class="box">
                        <pre class="brush:css">
                            .element { ... }
                            .element-avatar { ... }
                            .element-selected { ... }

                            @media (min-width: 480px) {
                                .element { ...}
                                .element-avatar { ... }
                                .element-selected { ... }
                            }
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
        
        
        
        
    </div>

    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="js/shCore.js"></script>
    <script src="js/shBrushJScript.js"></script>
    <script src="js/shBrushCss.js"></script>
    <script src="js/shBrushPlain.js"></script>
	<script src="js/app.js"></script> 
</body>
</html>